<script lang="ts" setup>
import type { DescItem } from '#/components/description';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { listByBizId } from '#/api';
import { Description } from '#/components/description';
import { FileBizTypeEnum } from '#/enums/commonEnum';
import { schemaToDetailForm } from '#/utils/tool';

import { formSchamas } from './schemas/index';

const record = ref();
const schemaGroup = ref<DescItem[]>([]);
const [Modal, ModalApi] = useVbenModal({
  footer: false,
  async onOpenChange(isOpen) {
    const data = ModalApi.getData()?.record;
    record.value = isOpen ? data : {};
    if (isOpen) {
      const appendixIcons = await listByBizId({
        bizId: record.value.id,
        bizType: FileBizTypeEnum.DEF_APPLICATION_LOGO,
      });
      record.value.appendixIcon = appendixIcons?.[0]?.id;
      data.appendixIcon = appendixIcons?.[0]?.id;

      schemaGroup.value = schemaToDetailForm(formSchamas, data);
    }
  },
});
defineExpose(ModalApi);
</script>
<template>
  <div>
    <Modal class="w-[60%]" title="查看">
      <div class="desc-wrap">
        <div
          v-for="schema in schemaGroup"
          :key="schema.field"
          class="desc-card"
        >
          <Description
            :data="record"
            :schema="schema.children"
            :title="schemaGroup.length === 1 ? undefined : schema.label"
          />
        </div>
      </div>
    </Modal>
  </div>
</template>
<style scoped lang="less">
@import '#/assets/styles/common-detail.less';
</style>
